<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        #box {
            width: 360px;
            height: 460px;
            border: 1px solid #ccc;
            padding: 10px;
            position: relative;
            margin-left: 50px;
            margin-top: 50px;
        }
        
        #box #smallImg {
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            padding: 5px;
            position: relative;
        }
        
        #box #smallImg img {
            width: 350px;
            height: 350px;
        }
        
        #box #smallArea {
            width: 100px;
            height: 100px;
            background: rgba(100, 222, 200, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        
        #box #small {
            /*background: red;*/
            width: 360px;
            height: 50px;
            margin-top: 10px;
        }
        
        #box #small li,
        #box #small li img {
            width: 48px;
            height: 48px;
        }
        
        #box #small li {
            float: left;
            border: 1px solid #ccc;
            margin-left: 10px;
            padding: 5px;
            cursor: pointer;
        }
        
        #box #bigArea {
            position: absolute;
            left: 420px;
            top: 50px;
            overflow: hidden;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            display: none;
        }
        
        #box #bigArea img {
            position: absolute;
            left: 0;
            top: 0;
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="smallImg">
            <img src="./images2/1_2.jpeg" />
            <div id="smallArea"></div>
        </div>
        <div id="small">
            <ul>
                <li><img src="./images2/1_1.jpeg" /></li>
                <li><img src="./images2/2_1.jpeg" /></li>
                <li><img src="./images2/3_1.jpeg" /></li>
                <li><img src="./images2/4_1.jpeg" /></li>
                <li><img src="./images2/5_1.jpeg" /></li>
            </ul>
        </div>
        <div id="bigArea">
            <img id="bigImg" src="./images2/1_3.jpeg" />
        </div>
    </div>
</body>
</html>
<script>
    const getStyle=(obj,attr)=>{
        if(window.getComputedStyle){
            return window.getComputedStyle(obj,null)[attr];
        }
        return obj.currentStyle[attr];
    }
    var oBox=document.querySelector("#box");
    var oSmallImg=document.querySelector("#smallImg");
    var oSmallArea=document.querySelector("#smallArea");
    var oBigImg=document.querySelector("#bigImg");
    var oBigArea=document.querySelector("#bigArea");

    oSmallArea.style.width=parseInt(getStyle(oBigArea,"width"))/parseInt(getStyle(oBigImg,"width"))*parseInt(getStyle(oSmallImg,"width"))+"px";
    oSmallArea.style.height=parseInt(getStyle(oBigArea,"height"))/parseInt(getStyle(oBigImg,"height"))*parseInt(getStyle(oSmallImg,"height"))+"px";

    oSmallImg.onmouseenter=function(){
        oSmallArea.style.display="block";
        oBigArea.style.display="block";
        oSmallImg.onmousemove=function(evt){
            var e=evt||window.event;
            let toX=e.pageX-oSmallImg.offsetLeft-oBox.offsetLeft-oSmallArea.offsetWidth/2;
            let toY=e.pageY-oSmallImg.offsetTop-oBox.offsetTop-oSmallArea.offsetHeight/2;
            if(toX<=0){
                toX=0;
            }
            if(toY<=0){
                toY=0;
            }
            if(toX>=oSmallImg.offsetWidth-oSmallArea.offsetWidth){
                toX=oSmallImg.offsetWidth-oSmallArea.offsetWidth;
            }
            if(toY>=oSmallImg.offsetHeight-oSmallArea.offsetHeight){
                toY=oSmallImg.offsetHeight-oSmallArea.offsetHeight;
            }
            oSmallArea.style.left=toX+"px";
            oSmallArea.style.top=toY+"px";


            let oPercent=parseInt(getStyle(oBigImg,"width"))/parseInt(getStyle(oBigArea,"width"));
            oBigImg.style.left=-(toX*oPercent)+"px";
            oBigImg.style.top=-(toY*oPercent)+"px";
        }
    }
    oSmallArea.onmouseleave=function(){
        oSmallArea.style.display="none";
        oBigArea.style.display="none";
    }


    var oLis=document.querySelectorAll("li");
    var oSmall=document.querySelector("#smallImg img");
    for(let i=0;i<oLis.length;i++){
        oLis[i].onclick=function(){
            oSmall.src="./images2/"+(i+1)+"_2.jpeg";
            oBigImg.src="./images2/"+(i+1)+"_3.jpeg";
        }
    }
</script>